<html>
<head>
<style type="text/css">
/**
 * Design lifted from listamatic
 * http://css.maxdesign.com.au/listamatic/horizontal05.htm
 * Which was originally lifted from Eric Meyer
 */
.navlist
{
	padding: 3px 0;
	margin-left: 0;
	border-bottom: 1px solid #778;
	font: bold 12px Verdana, sans-serif;
}

.navlist li
{
	list-style: none;
	margin: 0;
	display: inline;
}

.navlist li a
{
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 1px solid #778;
	border-bottom: none;
	background: #DDE;
	text-decoration: none;
}

.navlist li a:link { color: #448; }
.navlist li a:visited { color: #667; }

.navlist li a:hover
{
	color: #000;
	background: #AAE;
	border-color: #227;
}

.navlist li a.active
{
	background: white;
	border-bottom: 1px solid white;
}

.navlist li.active {}
</style>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? " https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + " google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
var pageTracker = _gat._getTracker("UA-3115657-1");
pageTracker._initData();
pageTracker._trackVisit();
</script>

<script type="text/javascript" src="../ToolMan/core.js"></script>
<script type="text/javascript" src="../ToolMan/events.js"></script>
<script type="text/javascript" src="../ToolMan/css.js"></script>
<script type="text/javascript" src="../ToolMan/coordinates.js"></script>
<script type="text/javascript" src="../ToolMan/drag.js"></script>

<script type="text/javascript" src="../jsTool/core-ext.js"></script>
<script type="text/javascript" src="../jsTool/intersection-ext.js"></script>
<script type="text/javascript" src="../jsTool/drag2container-ext.js"></script>
<script type="text/javascript" src="../jsTool/test-ext.js"></script>
<script type="text/javascript" >
window.onload = function ()
{
	var drag2cs = Tool.drag2container();
	var drag = ToolMan.drag();
	//var dragsort = ToolMan.dragsort();
	var events = ToolMan.events();
	_$ =
	{
		getById: function (id) { return document.getElementById(id); },
		getByTagName: function (str, element)
		{
			var src = element || document;
			return src.getElementsByTagName(str);
		}
		
		// ...
	};

	/// handler for tab onclick
	var activate = function ()
	{
		/// this was already active
		if (this.className.match(/active/)) { return false; }

		var parent = this.parentNode.parentNode;
		var siblings = parent.getElementsByTagName('A');
		if (siblings.length)
		for (var a=0, len=siblings.length; a<len; ++a)
			if (siblings[a] != 'undefined')
			{
				if (siblings[a].className)
				{
					var re = /active/; 
					siblings[a].className = siblings[a].className.replace(re,"");
					/// with moving tabs, you can no longer assume
					/// there is only one active tab, so we no longer break
					//break; 
				}
			}
		this.className += " active";
		
		// do something
		Tool.test().print1 (this.innerHTML);
		return false; /// stop default agent behaviour
	}
	
	/// register handlers for onclick
	var body = _$.getByTagName('BODY')[0];
	var anchors = _$.getByTagName('A', body);
	for (var i in anchors)
	{
		events.register
			(
				anchors[i],
				"click",
				activate
			);
	}

	/// sortable lists
	var lists = _$.getByTagName('UL', body);
	var real_lists = new Array();

	for (var l in lists)
		if (lists[l] !=  "undefined")
			if (lists[l].tagName)
				if (lists[l].tagName == 'UL')
			real_lists.push(lists[l]);


	/// make tabs containable items
	var items = _$.getByTagName('LI', body);
	for (var i in items)
		if (items[i] != 'undefined')
			if (items[i].tagName)
				if (items[i].tagName == 'LI')
			drag2cs.makeItemContainable(items[i], real_lists);

}; /// end of window.onload handler
</script>
<body>
<div class="navcontainer">
	<ul class="navlist">
		<li class="active"><a href="#">six</a></li>
		<li><a href="#">two</a></li>
		<li><a href="#">three</a></li>
		<li><a href="#">four</a></li>
		<li><a href="#">five</a></li>
	</ul>
</div>
<div class="navcontainer">
	<ul class="navlist">
		<li class="active"><a href="#">omega</a></li>
		<li><a href="#">alpha</a></li>
		<li><a href="#">beta</a></li>
		<li><a href="#">gamma</a></li>
		<li><a href="#">delta</a></li>
	</ul>
</div>
<div class="navcontainer">
	<ul class="navlist">
		<li class="active"><a href="#">e</a></li>
		<li><a href="#">a</a></li>
		<li><a href="#">b</a></li>
		<li><a href="#">c</a></li>
		<li><a href="#">d</a></li>
	</ul>
</div>

</body>
</html>